import PropTypes from 'prop-types'
import '@/assets/style01.scss'
import { useState } from 'react'

function Button(props) {
    let { type, children, onClick } = props
    return (
        <div className='ml-button'>
            <span className={type} onClick={onClick}>{children}</span>
        </div>
    )
}
Button.propTypes = {
    type: PropTypes.oneOf(['default', 'primary', 'danger', 'info']),
    children: PropTypes.node,
    onClick: PropTypes.func,
}
Button.defaultProps = {
    type: 'default',
    children: '按钮',
    onClick: () => { },
}

function ModalHeader(props) {
    let { title, closable, onCancel } = props
    return (
        <div>
            <div>{title}</div>
            <div onClick={onCancel}>{closable && 'X'}</div>
        </div>
    )
}

function ModalFooter(props) {
    let { type, onCancel, onConfirm, footer } = props
    let renderFooter = () => {
        let btns = []
        switch (type) {
            case 'confirm':
                btns = [
                    <Button key='1' type='primary' onClick={onConfirm}>确定</Button>,
                    <Button key='2' onClick={onCancel}>取消</Button>
                ]
                break;
            case 'danger':
                btns = [
                    <Button key='1' type='danger' onClick={onConfirm}>删除</Button>,
                    <Button key='2' onClick={onCancel}>取消</Button>
                ]
                break;
            case 'info':
                btns = [
                    <Button key='1' type='info' onClick={onCancel}>我知道了</Button>,
                ]
                break;
        }
        return btns
    }
    return (
        footer ? footer() : renderFooter()
    )
}

function Modal(props) {
    let { children, visiable, onCancel, width } = props
    let handerLayer = (e) => {
        if (e.target.dataset.self) {
            onCancel()
        }
    }
    return (
        <div className="ml-layer" style={{ display: visiable ? 'block' : 'none' }} data-self='layer' onClick={handerLayer}>
            <div className="ml-modal" style={{ width: `${width}px`, marginLeft: `-${width / 2}px` }}>
                <header>
                    {/* props穿透 */}
                    <ModalHeader {...props}></ModalHeader>
                </header>
                <main>{children}</main>
                <footer>
                    <ModalFooter {...props}></ModalFooter>
                </footer>
            </div>
        </div>
    )
}
// 对Modal接收的prop进行数据校验
Modal.propTypes = {
    title: PropTypes.elementType,
    closable: PropTypes.bool,
    children: PropTypes.node,
    type: PropTypes.oneOf(['confirm', 'danger', 'info']),
    visiable: PropTypes.bool,
    onCancel: PropTypes.func,
    onConfirm: PropTypes.func,
    footer: PropTypes.func,
    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
}
// 非必传项需要提供默认值
Modal.defaultProps = {
    title: '默认标题',
    closable: true,
    children: <div>默认内容</div>,
    type: 'info',
    visiable: false,
    onCancel: () => { },
    onConfirm: () => { },
    footer: () => { },
    width: 520,
}

function PageA() {
    let [visiable, setVisiable] = useState(false)
    let submit = () => {
        setTimeout(() => {
            console.log('发送ajax请求...');
            setVisiable(false)
        }, 200)
    }
    return (
        <div>
            <button onClick={() => setVisiable(true)}>open model</button>
            <Modal
                title={'添加用户'}
                closable
                type='confirm'
                visiable={visiable}
                onCancel={() => setVisiable(false)}
                onConfirm={submit}
                footer={
                    () => {
                        return [
                            <Button key='1' type='danger' onClick={() => setVisiable(false)}>残忍离开</Button>,
                            <Button key='2' type='primary' onClick={() => setVisiable(false)}>确定</Button>
                        ]
                    }
                }
                width={800}
            >
                <div>
                    <input type="text" />
                    <div>确定要添加此用户吗？</div>
                </div>
            </Modal>
        </div>
    )
}

export default PageA